<template>
  <el-page-header @click="goback">
    <template #content>
      <span class="text-large font-600 mr-3">审核详情</span>
    </template>
  </el-page-header>
  <el-descriptions
    class="margin-top"
    style="
      border-radius: 10px;
      margin: 20px auto;
      width: 73%;
      box-shadow: 5px 5px 10px rgba(98, 106, 239, 0.5);
    "
    :column="2"
    size="large"
    border
  >
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          岗位名称
        </div>
      </template>
      {{ position }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          所属部门
        </div>
      </template>
      {{ deptName }}
    </el-descriptions-item>
  </el-descriptions>
  <el-tabs tab-position="left" style="margin: 30px 0 0 0px" class="demo-tabs">
    <el-tab-pane label="评分考核" v-if="WaitStateList.scoreState == 1">
      <el-card class="role-card">
        <template #header>
      <div class="card-header">
        <span>评分项目</span>
        <el-icon><Connection/></el-icon>
      </div>
    </template>
        <ScoreForm
          :scoreList="scoreList"
          :update="update"
          :empId="empId"
          :positionId="positionId"
        ></ScoreForm>
        <div style="width: 100%; float: right">
          <el-input
            v-model="opinionForm1"
            type="textarea"
            placeholder="驳回意见,如审批通过无需填写"
            style="width: 500px; float: right;margin-right: 55px;"
          />
        </div>
        <el-radio-group
          v-model="form.scoreExamine"
          v-if="WaitStateList.scoreState == 1"
          style="margin-left: 55px;"
          size="large"
        >
          <el-radio-button label="1" >通过</el-radio-button>
          <el-radio-button label="2" >驳回</el-radio-button>
        </el-radio-group>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="计件考核" v-if="WaitStateList.pieceState == 1">
      <el-card class="role-card">
        <template #header>
      <div class="card-header">
        <span>计件项目</span>
        <el-icon><MessageBox/></el-icon>
      </div>
    </template>
        <PieceForm
          :pieceList="pieceList"
          :update="update"
          :empId="empId"
          :positionId="positionId"
        ></PieceForm>
        <div style="width: 100%; float: right">
          <el-input
            v-model="opinionForm2"
            type="textarea"
            placeholder="驳回意见,如审批通过无需填写"
            style="width: 500px; float: right;margin-right: 55px;"
          />
        </div>
        <el-radio-group
          v-model="form.pieceExamine"
          v-if="WaitStateList.pieceState == 1"
          style="margin-left: 55px;"
          size="large"
        >
          <el-radio-button label="1" >通过</el-radio-button>
          <el-radio-button label="2" >驳回</el-radio-button>
        </el-radio-group>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="提成考核" v-if="WaitStateList.kpiState == 1">
      <el-card class="role-card">
        <template #header>
      <div class="card-header">
        <span>提成项目</span>
        <el-icon><DataLine/></el-icon>
      </div>
    </template>
        <KpiForm
          :kpiList="kpiList"
          :update="update"
          :empId="empId"
          :positionId="positionId"
        ></KpiForm>
        <div style="width: 100%; float: right">
          <el-input
            v-model="opinionForm3"
            type="textarea"
            placeholder="驳回意见,如审批通过无需填写"
            style="width: 500px; float: right;margin-right: 55px;"
          />
        </div>
        <el-radio-group
          v-model="form.kpiExamine"
          v-if="WaitStateList.kpiState == 1"
          style="margin-left: 55px;"
          size="large"
        >
          <el-radio-button label="1" >通过</el-radio-button>
          <el-radio-button label="2" >驳回</el-radio-button>
        </el-radio-group>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="okr考核" v-if="WaitStateList.okrState == 1">
      <el-card class="role-card">
        <template #header>
      <div class="card-header">
        <span>Okr项目</span>
        <el-icon><Finished/></el-icon>
      </div>
    </template>
        <OkrForm
          :okrList="okrList"
          :update="update"
          :empId="empId"
          :positionId="positionId"
        ></OkrForm>
        <div style="width: 100%; float: right">
          <el-input
            v-model="opinionForm4"
            type="textarea"
            placeholder="驳回意见,如审批通过无需填写"
            style="width: 500px; float: right;margin-right: 55px;"
          />
        </div>
        <el-radio-group
          v-model="form.okrExamine"
          v-if="WaitStateList.kpiState == 1"
          style="margin-left: 55px;"
          size="large"
        >
          <el-radio-button label="1" >通过</el-radio-button>
          <el-radio-button label="2" >驳回</el-radio-button>
        </el-radio-group>
      </el-card>
    </el-tab-pane>
    <el-tab-pane
      label="审批完成"
      v-if="WaitStateList.pieceState != 1 
      && WaitStateList.kpiState != 1
      && WaitStateList.scoreState != 1
      && WaitStateList.okrState != 1
      && WaitStateList.totalState == 0"
    >
      <el-result
        icon="success"
        title="已审批"
        sub-title="已审批，请等待审核结果"
      >
        <template #extra>
          <el-button type="primary" @click="next">下一份</el-button>
        </template>
      </el-result>
    </el-tab-pane>
    <el-tab-pane
      label="绩效考核数据为空"
      v-if="WaitStateList.pieceState != 1 
      && WaitStateList.kpiState != 1
      && WaitStateList.scoreState != 1
      && WaitStateList.okrState != 1
      && WaitStateList.totalState == 1"
    >
    <el-empty description="绩效考核数据为空" />
    </el-tab-pane>
  </el-tabs>
<el-button
      type="primary"
      @click="submitForm"
      class="button"
      >提交审核结果</el-button
    >
</template>

<script  setup>
import { ref, onBeforeMount, reactive, getCurrentInstance, watch } from "vue";
import { useRoute } from "vue-router";
import { Timer } from "@element-plus/icons-vue";
import { Calendar } from "@element-plus/icons-vue";
import ScoreForm from "./components/scoreForm";
import PieceForm from "./components/pieceForm";
import KpiForm from "./components/kpiForm";
import OkrForm from "./components/okrForm";
import { getResultSecondExamine, addResultSecondExamine } from "@/api/resultSecond";
import { ElMessage } from "element-plus";

const route = useRoute();
let positionId = route.query.id;
let deptName = route.query.deptName;
let position = route.query.position;
let positionType = route.query.type;

const WaitStateList = ref([]);
const scoreList = ref([]);
const pieceList = ref([]);
const kpiList = ref([]);
const okrList = ref([]);
const assessorPage = ref([]);
onBeforeMount(() => {
  let positionId = route.query.id;
  getResultSecondExamine({ positionId }).then((data) => {
    WaitStateList.value = data.data.state[0];
    scoreList.value = data.data.score;
    pieceList.value = data.data.piece;
    kpiList.value = data.data.kpi;
    okrList.value = data.data.okr;
  });
});

const { proxy } = getCurrentInstance();
const goback = () => {
  proxy.$router.go(-1);
};

const form = reactive({
  scoreExamine:"1",
  kpiExamine:"1",
  pieceExamine:"1",
  okrExamine:"1"
});
const opinionForm1=ref()
const opinionForm2=ref()
const opinionForm3=ref()
const opinionForm4=ref()
const submitForm = () => {
  let assessorId = JSON.parse(localStorage.getItem("userInfo")).id;
  let positionId = route.query.id;
  let opinion1=opinionForm1
  let opinion2=opinionForm2
  let opinion3=opinionForm3
  let opinion4=opinionForm4
  addResultSecondExamine({form, positionId, assessorId ,positionType,opinion1,opinion2,opinion3,opinion4}).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "审批成功",
        type: "success",
      });
      proxy.$router.go(-1);
    }
  });
};
</script>
<style lang="scss" scoped>
.el-card {
  border-radius: 10px;
  margin: 20px auto;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

.button {
  width: 120px;
  height: 40px;
  float: right;
}

.header-tab:deep(.el-tabs__content) {
  flex-grow: 1;
  overflow-y: scroll;
}
.fixed-tabs {
  position: sticky;
  top: 0; /* 选项卡固定在顶部 */
  z-index: 1000; /* 确保选项卡在内容之上 */
}
:deep(.my-label) {
  background: rgba(98, 106, 239, 0.15) !important;
  color: #626aef !important;
  border: #626aef 2px solid !important ;
}
:deep(.my-content) {
  color: #fff !important;
  background: rgba(98, 106, 239, 0.9) !important;
  border: #626aef 2px solid !important ;
}
.el-card ::v-deep .el-card__header {
  border: none;
  height: 20px;
  color: #95d475;
  font-size: 20px;
}
</style>
